<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/WEB-INF/views/includes/taglibs.jsp"%>
<%@ include file="/WEB-INF/views/includes/taglibs_date.jsp"%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="nice user" />
<meta name="description" content="nice user" />
<title>NICE USER</title>



<script type="text/javascript">

$(function(){ 

	
  $("#userList").jqGrid({
    url:'findAll',
    datatype: 'json',
    mtype: 'GET',
    multiselect: false,
    colNames:['user id','first name', 'last name','gender','birthday','mail','creation date'],
    colModel :[ 
      {name:'userId', index:'userId', width:55, hidden:true}, 
      {name:'firstName', index:'firstName', width:90 ,editable:true, editrules:{required:true, minValue:1, maxValue:30} }, 
      {name:'lastName', index:'lastName', width:80 ,editable:true, editrules:{required:true, minValue:1, maxValue:30}}, 
      {name:'gender', index:'gender', width:80 ,editable:true, edittype:'select', editoptions: { value: 'male:male; female:female' }}, 
      {name:'birthday', index:'birthday', width:80 ,editable:true, sorttype:'date', editrules:{date:true}, editoptions: {dataInit:datePick}}, 
      {name:'mail', index:'mail', width:80 ,editable:true, editrules:{email:true, required:true, minValue:1, maxValue:80}}, 
      {name:'creationDate', index:'creationDate', width:150, sorttype:'date'}
    ],
    postData: {
	  },
	  rowNum:20,
	     rowList:[20,40,60],
	     height: 200,
	     autowidth: true,
	  rownumbers: true,
	     pager: '#pager',
	     sortname: 'userId',
	     viewrecords: true,
	     sortorder: "asc",
	     caption:"Users Management",
	     emptyrecords: "Empty records",
	     loadonce: false,
	     gridComplete: function() {
	  },
	     jsonReader : {
	         root: "rows",
	         page: "page",
	         total: "total",
	         records: "records",
	         repeatitems: false,
	         cell: "cell",
	         id: "userId"
	     }
	 });


	 
	 $("#userList").jqGrid('navGrid','#pager',
	   {edit:true,add:true,del:true,search:true,
		   edittext: "Edit",addtext: "Add",deltext:"Delete",searchtext:"Search",refreshtext:"Refresh"},
		//preEdit
	   	{
		 url: "editUser",
	     closeAfterEdit: "true",
	     modal: "true",
	     checkOnSubmit: "true",
	     checkOnUpdate: "true"
	     
		},

	   	//preAdd
	    { url: "editUser",
		  closeAfterAdd: "true",
		  modal: "true",
		  checkOnUpdate: "true"
		 },

		 //prmDel
	     {
			 url: "deleteUser",
		     modal: "true"
		 },

		 //prmSearch
	   	{
		     modal: "true"
		},

		//prmView
		{
		}
	 );

	
	
	});
</script>

<script type="text/javascript">

function customEdit(){
	$.post("editUserPage", function() {
		$("#editUserDialog").dialog({ modal: true, title: 'edit user' });
	});
}


</script>  	
</head>
<body>

<div style="margin:10px;">
<table id="userList"><tr><td/></tr></table> 
<div id="pager"></div> 
</div>

<a href="javascript:customEdit();">test custom edit</a>

<%@ include file="/WEB-INF/views/user/customEdit.jsp"%>



</body>
</html>